<template>
  <div>
    <MyHead></MyHead>
    <van-tabs v-model="active" class="us-like">
      <van-tab title="我的喜欢">
        <ul class="scroll-box" v-if="likes.length > 0">
          <li v-for="(item, index) in likes" :key="item.id">
            <div class="left-box">{{ index + 1 }}</div>
            <div class="right-box">
              <h2>{{ item.name }}</h2>
              <p>{{ item.album }}</p>
            </div>
            <div class="time-box">{{ item.duration | formatTime }}</div>
          </li>
        </ul>
        <div class="empty" v-else>
          <van-empty
            class="custom-image"
            image="http://ustbhuangyi.com/music-next/img/no-result@3x.2858208a.png"
            description="暂无收藏歌曲，快去添加吧！"
          />
        </div>
      </van-tab>
      <van-tab title="最近播放">
        <ul class="scroll-box" v-if="lately.length > 0">
          <li v-for="(item, index) in lately" :key="item.id">
            <div class="left-box">{{ index + 1 }}</div>
            <div class="right-box">
              <h2>{{ item.name }}</h2>
              <p>{{ item.album }}</p>
            </div>
            <div class="time-box">{{ item.duration | formatTime }}</div>
          </li>
        </ul>
        <div class="empty" v-else>
          <van-empty
            class="custom-image"
            image="http://ustbhuangyi.com/music-next/img/no-result@3x.2858208a.png"
            description="你还没有听过歌曲"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import MyHead from "../../components/MyHead.vue";
export default {
  components: {
    MyHead,
  },
  data() {
    return {
      active: 0,
      likes: JSON.parse(localStorage.getItem("likes")) || [],
      lately: JSON.parse(localStorage.getItem("lately")) || [],
    };
  },
  filters: {
    formatTime(data) {
      let m = parseInt(data / 60);
      let s = parseInt(data % 60);
      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
    },
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
.us-like {
  .margin-top(82);
}
/deep/ .van-tabs__line {
  background-color: gold;
  .w(60);
}
/deep/ .van-tab {
  background: #222;
  color: #fff;
}
/deep/ .van-tab--active {
  color: #fff;
  background: rgb(51, 51, 51);
}
.scroll-box {
  .w(375);
  .min-h(600);
  color: #fff;
  // overflow: scroll;
  font-size: 14px;
  background: #000;
  .padding(20,20,60,20);
  box-sizing: border-box;
  li {
    .h(88);
    .w(320);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-box {
      font-size: 18px;
      color: hsla(0, 0%, 100%, 0.3);
    }
    .right-box {
      .padding-left(15);
      .padding-right(15);
      h2 {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #fff;
      }
      p {
        .w(210);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .margin-top(8);
        color: hsla(0, 0%, 100%, 0.3);
      }
    }
  }
}
</style>
